<template>
  <div class="Login">
    <div class="content">
      <img src="../assets/img/title.png" alt class="title-pic" />
      <p class="msg">New A-MIS</p>
      <div class="pic-login-box">
        <div class="title-top">{{$t('message.login.title')}}</div>
        <el-input
          :placeholder="$t('message.login.userName')"
          prefix-icon="el-icon-user"
          v-model="userName"
          class="ipt"
        ></el-input>
        <el-input
          :placeholder="$t('message.login.psw')"
          prefix-icon="el-icon-lock"
          v-model="passWord"
          class="ipt"
          show-password
        ></el-input>
        <div class="checkbox-view">
          <el-checkbox v-model="checked">{{$t('message.login.automaticLogon')}}</el-checkbox>
          <!-- <span class="forget">{{$t('message.login.forgetPsw')}}？</span> -->
        </div>
        <button class="login-btn" @click="login">{{$t('message.login.login')}}</button>
        <div class="lang-view">
          <el-dropdown>
            <span>{{$t('message.language.name')}}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="langChange('1')">
               中文
              </el-dropdown-item>
              <el-dropdown-item @click.native="langChange('0')">
                日本語
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setLocalStorage, getLocalStorage } from "../utils/storage";
import { setCookie, getCookie } from "../utils/cookie";
import { login } from "../api/api";
import md5 from "js-md5";
// 导出模块
export default {
  // 模块名字
  name: "Login",
  // 模块数据
  data() {
    //数据
    return {
      userName: "",
      passWord: "",
      checked: false,
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    login() {
      login({
        UserName: this.userName.trim(),
        Password: md5(this.passWord.trim()),
      }).then((res) => {
        if (res.data.code != 0) {
          this.$message.error(res.data.msg);
          return;
        }
        setLocalStorage('activeClass', 0)
        setLocalStorage('accType', res.data.data.accType)
        setLocalStorage("userID", res.data.data.id);
        if(this.checked){
          setCookie('user',this.userName.trim(),7)
          setCookie('psw',this.passWord.trim(),7)
        }
        this.$router.push("/HomePageView");
      });
    },
    enterKey(event) {
      const componentName = this.$options.name;
      if (componentName == "Login") {
        const code = event.keyCode
          ? event.keyCode
          : event.which
          ? event.which
          : event.charCode;
        if (code == 13) {
          this.login();
        }
      }
    },
    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
      document.addEventListener("keyup", this.enterKey);
    },
    langChange(type){
      setLocalStorage("lang", type);
      this.$i18n.locale = getLocalStorage("lang") == '1' ? "zh" : "jp";
    }
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    this.userName = getCookie('user')
    this.passWord = getCookie('psw')
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    this.enterKeyup();
    setLocalStorage("lang", '0');
    this.$i18n.locale = getLocalStorage("lang") == "1" ? "zh" : "jp";
  },
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },
};
</script>
<style  lang="scss" scoped>
.Login {
  position: fixed;
  width: 100%;
  height: 100%;
  // background: url("../assets/img/loginBg.png") no-repeat;
  background: #fff;
  background-size: cover;
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .pic-login-box {
    width: 500px;
    height: 520px;
    background: rgba(226, 233, 242, 0.5);
    border-radius: 3px;
    background: url("../assets/img/login.png") no-repeat;
    background-size: 100% 100%;
  }
  .title-pic {
    width: 288px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 18px;
  }
  .msg {
    margin: 0 auto;
    margin-bottom: 52px;
    font-size: 22px;
    font-weight: 600;
    color: rgba(7, 7, 7, 1);
  }
  .title-top {
    font-size: 22px;
    color: rgba(0, 0, 0, 0.85);
    padding: 48px 0 76px 0;
  }
  .ipt {
    width: 368px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    // border: 1px solid rgba(217, 217, 217, 1);
    margin-bottom: 24px;
    color: rgba(0, 0, 0, 0.25);
    font-size: 16px;
  }
  .checkbox-view {
    width: 368px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  ::v-deep .el-checkbox__label {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
  }
  .forget {
    font-size: 14px;
    color: #2667bd;
    cursor: pointer;
  }
  .login-btn {
    width: 368px;
    height: 40px;
    background: rgba(230, 1, 19, 1);
    border-radius: 4px;
    line-height: 40px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 24px;
  }
  .lang-view {
    width: 368px;
    text-align: right;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    margin: 0 auto;
    span {
      cursor: pointer;
    }
  }
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #213d49;
  border-color: #213d49;
  color: #001529;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #213d49;
  border-color: #213d49;
  color: #001529;
}
::v-deep .el-checkbox__inner:hover {
  background-color: #213d49;
}
::v-deep .el-checkbox__inner:hover {
  background-color: #213d49;
  color: #001529;
}
::v-deep .el-checkbox__inner:hover {
  border-color: #213d49;
}
}
</style>
